class List {
  constructor () {
    this.editList()
    this.page = new Paging()
  }
  editList () {
    // 对表格里已有的数据做编辑，给四种按钮绑事件
    // 用事件委托
    $('#position-tbody').on('click', 'button', function () {
      const $tr = $(this).parents('tr')
      if ($(this).hasClass('btn-edit')) {
        // 点击的是编辑按钮
        // 给父级的tr加上edit class
        $tr.addClass('edit').find('span').each(function () {
          // $(this) 指当前正在遍历到的span
          // 把span的内容给对应的input
          $(this).next().val($(this).html())
        })

      } else if ($(this).hasClass('btn-del')) {
        // 删除
        if(confirm('你确定嘛')){
          const id = $tr.attr('data-id')
          $.get('/api/pos/del',{id},resp=>{
            console.log(resp)
            if(resp.code == 200){
              // $tr.remove()
              // $('.tr-num').each((index,item)=>{
              //   $(item).find('.td-num').html(index+1)
              // })
              _this.page.renderPage()
            }else{
              alert(resp.body.msg)
            }
          })
        }
      } else if ($(this).hasClass('btn-ok')) {
        // 确定
        // 把id，title，company，salary数据发送给后端，后端修改
        const id = $tr.attr('data-id'),
              title = $tr.find('.title').val(),
              company = $tr.find('.company').val(),
              salary = $tr.find('.salary').val(),
              experience = $tr.find('.experience').val();
        // 发送请求了
        $.get('/api/pos/edit', { id, title, company, salary, experience }, resp => {
          if (resp.code == 200) {
            // 修改当前这一行的显示
            // 把tr的edit移出，并且把input的value给到对应的span的html
            $tr.removeClass('edit').find('span').each(function () {
              $(this).html($(this).next().val())
            })
          } else {
            alert(resp.body.msg)
          }
        })
      }else if ($(this).hasClass('btn-cancel')){
        $tr.removeClass('edit')
      }
    })
  }
}

new List()